<template>
  <div style="background: #f5f5f5;">
    <div class="scroll-container">
     <div class="inner" v-for="(item, index) in items" :index="index" :key="key">
      <div style="font-size: 13px;">{{item}}</div>
      </div>
    </div>
        <div>
      <img src="http://pe9eiblf9.bkt.clouddn.com/ct1.jpg" style="width: 100%;">
    </div>
    <div style="background: white; height: 164rpx; padding-top: 36rpx;">
      <div style="margin-left: 30rpx; font-weight: bold; color: #111; font-size: 40rpx; margin-bottom: 20rpx;">百年好合宴</div>
      <div style="margin-left: 30rpx; color: #777; font-size: 26rpx;">含一个菜单</div>
    </div>
    <div class="menu_container">
      <img src="http://pe9eiblf9.bkt.clouddn.com/cd.png" style="width: 100%;">
      <div style="color: #333; height: 44rpx; font-size: 24rpx;" v-for="(item, index) in foods['百年好合宴']" :index="index" :key="key">
        {{item}}
      </div>
    </div>
    <div style="background: white;  margin-top: 10px;">
      <div>其他费用</div>
      <div>服务费： 免费</div>
      <div>开瓶费： 免费</div>
      <div>进场费： 免费</div>
    </div>
      <footer>
        <div class="call-item">
          <div style="height: 44rpx; width: 44rpx;">
            <img src="/static/call.png" style="width: 100%; height: 100%;">
          </div>
          
          <div style="color: #666; font-size: 24rpx;" >电话</div>
      </div>
        <div style="background: #fe6630; width: 75%; color: white; text-align: center; height: 80rpx; line-height: 80rpx; margin-left: 30rpx; border-radius: 6rpx;" @click="tapToBooking">预约看店</div>
      </footer>
  </div>
</template>

<script>
export default {
  data () {
    return {
      items: [
        '3888元/桌',
        '4888元/桌',
        '5888元/桌',
        '6888元/桌',
        '7888元/桌'
      ],
      foods: {
        '百年好合宴': [
          '时令水果拼盘',
          '粤式美点双辉',
          '广式水晶鲜虾饺',
          '清炒养生绿叶蔬',
          '妙手脆炸香酥拼',
          '渔家醉鱼蒸酥肉',
          '黑椒珍菌牛仔粒',
          '上汤竹笙扒时蔬',
          '人参滋补散养鸡',
          '果木炭烤琵琶鸭',
          'XQ酱爆北极蚌片',
          '一品东坡扒红肘',
          '粤式清蒸笋壳鱼',
          '金蒜粉丝蒸元贝',
          '好合葱姜炒海蟹',
          '芝士伊面焗龙虾',
          '金汤富贵鲍参翅'
        ],
        '浓情蜜意宴': [
          '粤式美点双辉',
          '锦绣水果拼盘',
          '潮州卤水大拼盘',
          '珍菌鱼胶煲海参',
          '金汤富贵焗龙虾',
          '黄金秘制珍宝蟹',
          '豉香葱油大连鲍',
          '粤式清蒸海龙胆',
          '吉祥红焖富贵肘',
          'XQ酱爆花枝澳带',
          '杭椒茶菇爆爽肉',
          '人参滋补虫草鸡',
          '上汤瑶柱扒时蔬',
          '金牌主厨牛肋骨',
          '特色威海烤鱿鱼',
          '清炒养生绿叶蔬',
          '广式虾茸一品饺'
        ],
        '喜结良缘宴': [
          '锦绣水果拼盘',
          '粤式美点双辉',
          '白灼深水基围虾',
          '港式烧味大拼盘',
          '广式虾茸一品饺',
          '美极金钩寖芥兰',
          '果木炭烤琵琶鸭',
          '主厨秘制牛肋骨',
          '上汤瑶柱扒时蔬',
          '人参滋补虫草鸡',
          '瑶柱爆花枝澳带',
          '明珠东坡富贵肘',
          '粤式清蒸海龙胆',
          '葱油一品大连鲍',
          '黄金秘制珍宝蟹',
          '芝士伊面焗龙虾',
          '金汤鱼胶烩海参'
        ],
        '如意吉祥宴会': [
          '粤式美点双辉',
          '锦绣水果拼盘',
          '白灼深水基围虾',
          '广式虾茸一品饺',
          '一品瑶柱扒时蔬',
          '清炒养生绿叶蔬',
          '金汤鲍翅烩海参',
          '主厨秘制牛肋骨',
          '果木炭烤琵琶鸭',
          'XQ酱爆花枝澳带',
          '明珠东坡富贵肘',
          '清蒸深海大黄鱼',
          '银丝豉香大连鲍',
          '黄金秘制珍宝蟹',
          '葱油蒸美国红龙',
          '松茸菌皇煲老鸡',
          '金牌脆皮乳猪'
        ],
        '龙凤呈祥宴': [
          '锦绣环球水果拼盘',
          '粤式美点双辉',
          '广式虾茸一品饺',
          '瑶柱金钩寖芥兰',
          '石寨火瞳野石笋',
          '珍菌黑椒雪花牛肉',
          '金汤竹笙扒时蔬',
          '铁皮石斛炖老鸡',
          '白灼深水基围虾',
          'XQ酱爆北极蚌片',
          '明珠东坡富贵肘',
          '粤式清蒸东星斑',
          '银丝豉香大连鲍',
          '花雕醉蒸长脚蟹',
          '葱油蒸澳洲龙虾',
          '美国野米烩辽参',
          '法式刺身大拼盘'
        ]
      }
    }
  }
}
</script>

<style>

.scroll-container {
  display: flex;
  overflow-x: scroll;
  width: 100%;
  background: white;
  margin-left: 10px;
  margin-right: 10px;
  height: 90rpx;
  background: red;
}

.inner {
  width: 80px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  line-height: 90rpx;
}

footer {
    display: flex;
    position: fixed;
    bottom: 0px;
    background: white;
    width: 100%;
    height: 100rpx;
    justify-content: center;
    align-items: center;
}

.call-item {
  display: flex;
  flex-direction: column;
  width: 9%;
  height: 80rpx;
  justify-content: space-between;
  align-items: center;
}

.menu_container {
  display: flex;
  flex-direction: column;
  margin-top: 20rpx;
  background: white;
  align-items: center;
}

</style>
